<template>
  <div class="news-list newlist-style1">
    <ul class="list" v-if="newsInfo.length">
      <li v-for="item in newsInfo" :key="item.id" @click="handleDetail(item.id)">
        <a>
          <div class="date">
            <div class="date-top">{{item.day}}</div>
            <div class="date-bottom">{{item.ymSufix}}</div>
          </div>
          <div class="content">
            <p class="title">{{item.title}}</p>
            <p>
              {{item.abstract}}
            </p>
          </div>
        </a>
      </li>
    </ul>
    <van-empty description="暂无数据" v-else />
  </div>
</template>

<script>
import common from '@/mixins/index';
import dayjs from 'dayjs';
export default {
  mixins: [common],
  props: ['newsInfo'],
  data() {
    return {
    };
  },
  watch: {
    'newsInfo': function(newVal,oldVal){
      if(newVal){
        // newVal.ymSufix = dayjs(newVal.addtime).format('YYYY-MM')
        // newVal.day = dayjs(newVal.addtime).date()
        // console.log(newVal,'newVal')
        newVal.map(item => {
          item.ymSufix = dayjs(item.addtime).format('YYYY-MM')
          item.day = dayjs(item.addtime).date()
        })
        return newVal
      }
    }
  }
};
</script>

<style lang="less">
.list {
  list-style: none;
  padding: 0;
}
.news-list{
    padding: 0 0;
}
.news-list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.666667rem 0 0.533333rem;
  border-bottom: 0.013333rem solid #f5faff;
}
// .new-tab-wrapper{
//     .van-tabs{
//         width: 70%;
//     }
// }
.news-list li a .date {
  width: 1.866667rem;
  height: 2.133333rem;
  margin-right: 0.4rem;
  text-align: center;
  border-radius: 5px;
}
.news-list li a .date .date-top {
  padding: 0.293333rem 0.613333rem;
  font-size: 0.533333rem;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 0.746667rem;
  color: #F77B80;
  background-color: #FFF1F2;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.news-list li a .date .date-bottom {
  width: 1.866667rem;
  height: 0.8rem;
  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.8rem;
  color: #fff;
  background-color: #F77B80;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.news-list li a .content {
  flex: 1;
  text-align: left;
}
.news-list li a .content p {
  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.453333rem;
  color: #999;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}
.news-list li a .content .title {
  width: 6.933333rem;
  color: #333;
  margin-bottom: 0.666667rem;
  font-size: 0.373333rem;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 0.64rem;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>